<template>
  <div class="flex-v flex" style="height: 100%">
    <div @click="goBack" class="flexBack">
      <img src="../../assets/image/zxl/fanhui.png" style="width: 8px; height: 12px; margin-right: 4px" />
      <span>返回</span>
    </div>

    <div class="infoBox">
      <div class="bottomBox" v-if="isOK">
        <div class="flex width100 borderbottomea paddingbottom20 box-align-center">
          <div class="zi1 flex">发起解约</div>
        </div>
        <div class="flex box-align-center mt20">
          <img src="@/assets/image/cf/img28.png" alt="" />
          <div class="zi2" style="margin-left: 2px">请确认以下解约文件</div>
        </div>

        <div class="flex mt20 box-row-column">
          <div class="yemaqu">
            <img src="@/assets/image/cf/img32.png" alt="" />
            <div class="yema">共{{ formadd.total }}页</div>
          </div>
          <div class="zi3 mt20">{{ formadd.file_name }}</div>
        </div>

        <div class="flex box-align-center mt20">
          <div style="width: 24px" class="flex justify-content-center" @click="godetail">
            <img src="@/assets/image/cf/img33.png" alt="" />
          </div>

          <div class="zi2" style="margin-left: 2px">请选择解约原因</div>
          <div class="font13 color999">（系统将根据解约原因自动生成解约协议）</div>
        </div>
        <el-form ref="ruleFormRef1" label-position="right" :model="formadd" :rules="rules" class="form-inline mt20">
          <div class="flex flex-v" style="width: 40%">
            <el-form-item class="" label="解约原因:" prop="reason">
              <el-select v-model="formadd.reason" placeholder="请选择合同类型">
                <el-option key="1" label="条款内容有误" value="条款内容有误" />
                <el-option key="2" label="印章选择错误" value="印章选择错误" />
                <el-option key="3" label="签约人信息错误 " value="签约人信息错误" />
                <el-option key="4" label="合同终止" value="合同终止" />
                <el-option key="5" label="其他" value="其他" />
              </el-select>
            </el-form-item>
          </div>
        </el-form>
      </div>

      <div class="bottomBox" v-if="!isOK">
        <div class="flex width100 borderbottomea paddingbottom20 box-align-center">
          <div class="zi1 flex">确认解约协议</div>
        </div>

        <div class="flex box-align-center mt20">
          <img src="@/assets/image/cf/img29.png" alt="" />
          <div class="zi2">参与人</div>
        </div>
        <el-table
          :data="list"
          border
          class="mt20"
          v-loading="loading"
          element-loading-background="rgba(0, 0, 0, 0.5)"
          empty-text="暂无数据"
          element-loading-text="加载中..."
          header-row-class-name="table-header"
        >
          <el-table-column label="参与主体" align="center" prop="main_name" />
          <el-table-column label="经办人证号" align="center">
            <template #default="{ row }">
              <div>
                {{ row.join_name + +row.join_phone }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="签署要求" align="center" prop="yaoqiu" width="200" />
        </el-table>

        <div class="flex box-align-center mt20">
          <img src="@/assets/image/cf/img28.png" alt="" />
          <div class="zi2">合同基本信息</div>
        </div>

        <el-form ref="ruleFormRef2" label-position="right" :model="formadd" :rules="rules" class="form-inline mt20">
          <div class="flex flex-v" style="width: 40%">
            <el-form-item class="" label="选择文件:" prop="filelist">
              <div class="flex box-align-center" style="width: 100%">
                <div>
                  <img src="@/assets/image/cf/img31.png" alt="" style="width: 20px; height: 26px" />
                </div>
                <div class="zi3 flex-1 ml20">{{ formadd.filelist?.file_name }}</div>
                <div class="ml20">
                  <el-button type="text" size="mini" style="font-size: 15px" @click="pdfdetail">查看</el-button>
                </div>
              </div>
            </el-form-item>
            <el-form-item class="" label="合同名称:" prop="task_name">
              <el-input v-model="formadd.task_name" placeholder="请输入合同名称" />
            </el-form-item>
          </div>

          <div class="flex flex-v">
            <div class="flex box-align-center mt20">
              <img src="@/assets/image/cf/img30.png" alt="" />
              <div class="zi2">其他信息</div>
            </div>
            <div class="mt20">
              <el-form-item class="" label="签订截止日期:" prop="closing_date">
                <div class="flex">
                  <el-date-picker v-model="formadd.closing_date" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" placeholder="请选择入职时间"></el-date-picker>
                  <div class="font14 color333 ml20">如果流程在指定日期过后还没有签订完成，则本次签署自动过期，无法继续签订</div>
                </div>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
    </div>
    <!-- {{ info}} 

  {{ currentComanyInfo }}  -->
    <div class="bottomdiv mt20 flex box-align-center justify-content-end">
      <el-button type="primary" size="mini" color="#01509f" style="font-size: 15px" @click="goNext" class="mr20">下一步</el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { onMounted, reactive, ref, computed, nextTick } from "@/TUIKit/adapter-vue";
  import { useRouter, useRoute } from "vue-router";
  import { UserBaseInfo } from "@/api/user";
  import type { TabsPaneContext, ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus";
  import { getTerminationFileApi, getTerminationFileAndUploadApi,nextStepApi } from "@/api/cf";
  import axios from "axios";
  import { useCompanyDataStore } from "@/store/companys";
  const isOK = ref(true);
  const companyDataStore = useCompanyDataStore();
  const list = ref([]);
  const router = useRouter();
  const route = useRoute();
  const currentComanyInfo = computed(() => companyDataStore.currentComanyInfo);

  const ruleFormRef1 = ref(null);
  const ruleFormRef2 = ref(null);

  const formadd = ref({
    reason: "",
    file_name: "",
    file_path: "",
    filelist: null,
    task_name: "",
    total: "",
    closing_date: "",
    task_id: "",
    type: "",
    join: [],
    cancelContractId: "",
  });

  const filelist = ref(null);
  const pdfdetail = () => {
    window.open(formadd.value.filelist.file_path, "_blank");
  };
  //const detailid = ref(null);
  const godetail = () => {
    window.open(formadd.value.file_path, "_blank");
  };
  const goBack = () => {
    //router.push({ name: 'employeeList' });
    router.back();
  };

  const rules = reactive({
    reason: [{ required: true, message: "请选择解约原因", trigger: "change" }],
  });

  onMounted(() => {
    if (route.params.task_id) {
      getTerminationFileApi(route.params.task_id).then(res => {
        formadd.value.file_path = res.data.file_path;
        formadd.value.file_name = res.data.file_name;
        formadd.value.total = res.data.total;
      });
    }

    const currentDate = new Date();
    const later = new Date(currentDate);
    later.setDate(currentDate.getDate() + 7);
    formadd.value.closing_date = `${later.getFullYear()}-${String(later.getMonth() + 1).padStart(2, "0")}-${String(later.getDate()).padStart(2, "0")}`;
  });

  const goNext = () => {
    if (isOK.value) {
      submitNext1();
    } else {
      submitNext2();
    }
  };

  const submitNext1 = () => {
    ruleFormRef1.value?.validate(valid => {
      if (valid) {
        const loading = ElLoading.service({
          lock: true,
          text: "提交中,请稍后……",
          background: "rgba(0, 0, 0, 0.3)",
        });

        getTerminationFileAndUploadApi(route.params.task_id ? route.params.task_id : "", formadd.value.reason)
          .then(res => {
            //ElMessage.success("提交成功");
            loading.close();
            isOK.value = false;

            formadd.value.filelist = res.data.file;
            formadd.value.task_id = res.data.task_id;
            formadd.value.join = res.data.joins;

            list.value = res.data.joins.map(item => ({
              ...item,
              yaoqiu: "模板章",
            }));
            formadd.value.cancelContractId = res.data.cancelContractId;
            formadd.value.type = res.data.type;
            formadd.value.reason = res.data.reason;

            formadd.value.task_name = res.data.file.file_name.replace(/\.pdf$/, ""); // 去掉末尾的 .pdf
          })
          .catch(err => {
            loading.close();
          });
      }
    });
  };

  const submitNext2 = () => {

 
    ruleFormRef2.value?.validate(valid => {
      if (valid) {
        // 检查是否有 type === 1
   

  // const formadd = ref({
  //   reason: "",
  //   file_name: "",
  //   file_path: "",
  //   filelist: null,
  //   task_name: "",
  //   total: "",
  //   closing_date: "",
  //   task_id: "",
  //   type: "",
  //   join: [],
  //   cancelContractId: "",
  // });


  //                     const formadd = ref({
  //   task_name: "", //合同名称
  //   typename: route.params.name ? route.params.name : "",
  //   type: null,
  //   closing_date: "", //结束日期
  //   is_signarea: 1, //是否为标志区域
  //   labor_month: null, //劳动合同期限-自定义
  //   labor_year: null, //劳动合同期
  //   labor_start: null, //劳动合同起始时间
  //   labor_end: null, //劳动合同结束时间
  //   labor_salary: null, //劳动合同期薪资
  //   labortime: [],
  //   effect_time: null, //生效时间
  //   move_jobTime: null, //调岗时间
  //   move_jobDeptId: null, //调岗部门
  //   move_job: null, //调岗职位
  //   move_jobDeptName: null, //调岗部门名称
  //   departure_time: null, //离职时间
  //   probation_salary: "", //试用期薪资
  //   obtainment_salary: "", //转正薪资
  //   induction_time: null, //入职时间
  //   labortrial_month: null, //试用期
  //   filelist: null,
  // });

 //newObject.closing_date = newObject.closing_date + " 23:59:59";
  const newObject={
    task_name: formadd.value.task_name,
    type:formadd.value.type,
    closing_date:formadd.value.closing_date+ " 23:59:59",
    filelist:formadd.value.filelist,
    cancelContractId:formadd.value.cancelContractId,
  }


  ///console.log(newObject, "newObject");
        const data = {
          file:  formadd.value.filelist,
          fileType: 0,
          id:formadd.value.task_id,
          joins:formadd.value.join,
          total:formadd.value.total,
          task: newObject,
          type: formadd.value.type,
          // userId:"",
        };

        //  return false

        nextStepApi(data).then(res => {
          ElMessage.success("提交成功");
          // console.log(res.data.image.images[0].task_id, "sgsgw2g2g2g2g2g2g");
          setTimeout(() => {
            router.push({
              name: "SigningCenterDetail",
              params: { id: formadd.value.task_id, type: 1, userId: route.params.userid ? route.params.userid : "", usertype: route.params.usertype ? route.params.usertype : "" },
            });
          }, 800);
        });
      }
    });
  };
</script>

<style lang="scss" scoped>
.company-name {
  font-size: 16px;
  color: #666;

  img {
    margin-left: 5px;
  }
}

.infoBox {
  overflow-y: scroll;
  height: 100%;

  &::-webkit-scrollbar {
    display: none;
  }
}

.setstyle {
  min-height: 200px;
  padding: 0 !important;
  margin: 0;
  overflow: auto;
  cursor: default !important;
}

.el-upload-dragger {
  padding: 15px 0 !important;
}

.example-showcase .el-dropdown+.el-dropdown {
  margin-left: 15px;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: #333;
  display: flex;
  align-items: center;
}

.flexBack {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}

.bottomdiv {
  background-color: #fff;
  width: 100%;
  height: 60px;
}

.el-table__header .table-header th {
  font-size: 16px;
  background: #f3f8fb;
  height: 53px;
  color: #6f7070;
  font-weight: normal;
}

.zi1 {
  font-size: 20px;
  color: #01509f;
  // font-family: 黑体;
  font-weight: bold;
}

.zi2 {
  font-size: 17px;
  color: #01509f;
  // font-family: 黑体;
  margin-top: -2px;
  margin-left: 4px;
}

.bottomBox {
  background-color: #fff;
  border-radius: 12px;
  padding: 17px;
  box-sizing: border-box;
  margin-top: 22px;

  .bottomTopBox {
    padding-bottom: 18px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eaeaea;

    .bottomTitle {
      font-size: 20px;
      color: #333;
      font-weight: bolder;
      flex: 1;
    }

    .bottomRightBox {
      display: flex;
      align-items: center;

      .btnItem1 {
        border-radius: 6px;
        width: 108px;
        height: 36px;
        text-align: center;
        line-height: 30px;
        box-sizing: border-box;
        font-size: 16px;
        // color: #333;
      }

      .btnItem2 {
        border: none;
        border-radius: 6px;
        width: 72px;
        height: 36px;
        text-align: center;
        line-height: 30px;
        box-sizing: border-box;
        font-size: 16px;
      }
    }
  }
}

.avatar-uploader {
  width: 100%;
  text-align: center;
}

.el-upload_tip {
  font-size: 15px;
  color: #999;
}

.el-upload {
  width: 100%;
}

.tishired {
  background-color: #feeeec;
  line-height: 34px;
  font-size: 14px;
  border-radius: 4px;
  padding: 0 10px;
  color: #333;
}

.zi3 {
  font-size: 16px;
  color: #666;
}

.yemaqu {
  position: relative;
  width: 200px;
  height: 240px;
  cursor: pointer;
}

.yema {
  border-radius: 0.25rem !important;
  width: 3.25rem !important;
  height: 1.5rem !important;
  right: 0.25rem !important;
  bottom: 0.45rem !important;
  color: #999999 !important;
  font-size: 12px !important;
  line-height: 1.5rem !important;
  text-align: center !important;
  background-color: #f3f5f6 !important;
  padding: 0 10px !important;
  position: absolute !important;
}
</style>
